<!DOCTYPE html>
<html>

<head>
    <title>用户管理</title>
</head>

<body>

<div class="page-header">
    <h1>${_resource_name!''}
        <small><i class="ace-icon fa fa-angle-double-right"></i>
            用户列表
        </small>
    </h1>
</div><!-- /.page-header -->

<div class="row">
    <div class="col-xs-12">
        <!-- button 区域 -->
        <@shiro.hasPermission name="${ctlKey}:pagination">
            <@tbHeaderBtn l="search" />
        </@shiro.hasPermission>
        <!-- button 区域 ENDS -->
        <div class="hr hr-18 dotted hr-double"></div>
        <!-- PAGE CONTENT BEGINS -->
        <table id="dataTable" cellspacing="0" width="100%" class="table table-striped table-bordered table-hover"></table>
        <!-- PAGE CONTENT ENDS -->
    </div><!-- /.col -->
</div><!-- /.row -->
<div id="operateTxt">
    <@tbTableBtn l="edit,delete"/>
</div>
<dev id="detailTxt">
<div class="table-detail">
    <div class="row">
        <div class="col-xs-12 col-sm-2">
            <div class="text-center">
                <img height="150" class="thumbnail inline no-margin-bottom" alt="Domain Owner's Avatar" src="{2}" />
                <br />
                <div class="width-80 label label-info label-xlg arrowed-in arrowed-in-right">
                    <div class="inline position-relative">
                        <a class="user-title-label" href="#">
                            <i class="ace-icon fa fa-circle light-green"></i>
                            &nbsp;
                            <span class="white">{1}</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xs-12 col-sm-7">
            <div class="space visible-xs"></div>

            <div class="profile-user-info profile-user-info-striped">
                <div class="profile-info-row">
                    <div class="profile-info-name"> 账号 </div>

                    <div class="profile-info-value">
                        <span>{0}</span>
                    </div>
                </div>

                <div class="profile-info-row">
                    <div class="profile-info-name"> 手机号 </div>

                    <div class="profile-info-value">
                        <i class="fa fa-map-marker light-orange bigger-110"></i>
                        <span>{3}</span>
                    </div>
                </div>

                <div class="profile-info-row">
                    <div class="profile-info-name"> 邮箱 </div>

                    <div class="profile-info-value">
                        <span>{4}</span>
                    </div>
                </div>

                <div class="profile-info-row">
                    <div class="profile-info-name"> 身份证号 </div>

                    <div class="profile-info-value">
                        <span>{5}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xs-12 col-sm-3">
            <div class="space visible-xs"></div>
            <h4 class="header blue lighter less-margin">给 {1} 发送邮件</h4>

            <div class="space-6"></div>

            <form>
                <fieldset>
                    <textarea class="width-100" resize="none" placeholder="内容..."></textarea>
                </fieldset>

                <div class="hr hr-dotted"></div>

                <div class="clearfix">
                    <label class="pull-left">
                        <input type="checkbox" class="ace" />
                        <span class="lbl"> Email me a copy</span>
                    </label>

                    <button class="pull-right btn btn-sm btn-primary btn-white btn-round" type="button">
                        Submit
                        <i class="ace-icon fa fa-arrow-right icon-on-right bigger-110"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>
    </div>
</dev>

<form id="searchForm" >
    <div id="searchBox" >
        <div class="row">
            <div class="col-xs-12">
                <div class="widget-box">
                    <div class="widget-body">
                        <div class="widget-main">
                            <div>
                                <label for="form-field-1">账号</label>
                                <input id="form-field-1" name="userNm" type="text" class="form-control" value="${old_userNm!}"/>
                            </div>
                            <div class="space space-8"></div>
                            <div>
                                <label for="form-field-2">姓名</label>
                                <input id="form-field-2" name="userRealNm" type="text" class="form-control" value="${old_userRealNm!}"/>
                            </div>
                            <div class="space space-8"></div>
                            <div>
                                <label for="form-field-2">手机号</label>
                                <input id="form-field-2" name="mobileNo" type="text" class="form-control" value="${old_mobileNo!}"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
</body>
<my_script>
    <script src="/assets/js/jquery.serializejson.js"></script>
    <!-- page specific plugin scripts -->
    <script src="/assets/js/jquery.dataTables.min.js"></script>
    <script src="/assets/js/jquery.dataTables.bootstrap.min.js"></script>
    <script src="/common/js/jquery.dataTables.default.js"></script>
    <!-- bootbox scripts -->
    <script src="/common/js/bootbox.js"></script>
    <!-- end bootbox scripts -->
    <!-- inline scripts related to this page -->
    <script type="text/javascript">

        var tables = $('#dataTable').DataTable({
            columns: [
                {data:'userNm',title:'账号'},
                {data:null,title:'详细', className:"center",orderable:false,
                    render: function ( data, type, full, meta ) {
                        return "<div class='action-buttons'>\
						        <a href='#' class='green bigger-140 show-details-btn' title='Show Details'> <i class='ace-icon fa fa-angle-double-down'></i>\
						        	<span class='sr-only'>Details</span>\
						        </a>\
						     </div>";
                    }},
                {data:'userRealNm',title:'姓名'},
                {data:'mobileNo',title:'手机号'},
                {data:null,title:'重置密碼', className:"center",orderable:false,
                    render: function ( data, type, full, meta ) {
                        return "<a class='btn btn-xs btn-pink' onclick=\"resetPwd('" + full.id + "')\"><i class='ace-icon fa fa-refresh bigger-120'></i></a>";
                }},
                {data:null, title:"",className:"center", width:150,
                    render: function ( data, type, full, meta ) {
                        return $.format($("#operateTxt").html(), full.id);
                    }
                }
            ]
        });

        function formatDetail(d) {
            return $.format($("#detailTxt").html(),
                d.userNm,
                d.userRealNm,
                d.portrait==null?"/assets/images/avatars/profile-pic.jpg":"/upload/small/"+d.portrait,
                d.mobile==null?"":d.mobile,
                d.email==null?"":d.email,
                d.identityCardNo?"":d.identityCardNo,
                d.userId);
        }

        function sendMsg(userId, obj) {
            var txt = $(obj).parent().siblings("textarea").val();
            var safe = $(obj).parent().find("input[type='checkbox']").is(':checked');
            $.post("/mail/sendMsg",{userId:userId,txt:txt,safe:safe},function(data){
                if(data.success) {
                    $(obj).parent().siblings("textarea").val("");
                    bootbox.alert(data.message);
                } else {
                    bootbox.dialog({
                        title: '出错了',
                        message: '<p><i class="fa fa-bomb"></i>' + data.message + '</p>'
                    });
                }

            },"json");
        }

        function resetPwd(userId) {
            $.post("${ctlKey}/resetPwd",{userId:userId},function(data){
                if(data.success) {
                    bootbox.alert(data.message);
                } else {
                    bootbox.dialog({
                        title: '出错了',
                        message: '<p><i class="fa fa-bomb"></i>' + data.message + '</p>'
                    });
                }

            },"json");
        }
    </script>
</my_script>

</html>